import QtQuick
import QtQuick.Controls
import QtQuick.Layouts
import QtQuick.Controls.Material

RowLayout {
    id: fieldRow
    property string labelText: ""
    property string valueText: ""
    property string placeholder: ""
    property alias currentValueText: valueInput.text  // 暴露valueInput的实时文本内容
    
    signal removeClicked()
    signal popupClicked()
    signal clearClicked()  // 添加清空信号
    
    // 添加更新文本的函数
    function updateValueText(newText) {
        valueInput.text = newText
        valueText = newText  // 同时更新valueText属性
    }
    
    TextField {
        id: labelInput
        Layout.preferredWidth: 150
        text: fieldRow.labelText
        placeholderText: "Label"
        Material.accent: Material.Blue
    }
    
    TextField {
        id: valueInput
        Layout.fillWidth: true
        Layout.preferredWidth: 350
        placeholderText: fieldRow.placeholder
        Material.accent: Material.Green
        
        Component.onCompleted: {
            text = fieldRow.valueText
        }
        
        // 当valueText改变时更新text
        Connections {
            target: fieldRow
            function onValueTextChanged() {
                if (valueInput.text !== fieldRow.valueText) {
                    valueInput.text = fieldRow.valueText
                }
            }
        }
    }
    
    Button {
        Layout.preferredWidth: 48
        Layout.preferredHeight: 32
        Material.background: Material.Orange
        Text {
            anchors.centerIn: parent
            text: qsTr("...")
            color: "white"
        }
        onClicked: fieldRow.popupClicked()
    }
    Button {
        Layout.preferredWidth: 48
        Layout.preferredHeight: 32
        Material.background: Material.Orange
        Text {
            anchors.centerIn: parent
            text: qsTr("clear")
            color: "white"
        }
        onClicked: {
            valueInput.text = "";
            fieldRow.clearClicked();  // 发送清空信号
        }
    }
    Button {
        text: "X"
        Layout.preferredWidth: 32
        Layout.preferredHeight: 32
        Material.background: Material.Red
        Material.foreground: Material.LightBlue
        onClicked: fieldRow.removeClicked()
        Text {
            anchors.centerIn: parent
            text: qsTr("X")
            color: "white"
        }
    }
}
